; (function (w, doc) {

    class CropBox {
        constructor(options, el) {

            this.el = el || doc.querySelector(options.imageBox);
            this.state = {};
            this.styleEl = this.el.style
            const offset = this.el.getBoundingClientRect()
            this.initLeft = offset.left;
            this.initTop = offset.top;
            this.disX = this.disY = 0;
            this.elWidth = this.el.offsetWidth;
            this.elHeight = this.el.offsetHeight;
            this.draggable = false;
            this.options = options;
            this.imageBox = el;
            this.thumbBox = el.querySelector(options.thumbBox);
            this.spinner = el.querySelector(options.spinner);
            this.image = new Image();
            this.spinner.style.display = 'block';
            this.image.onload = () => {
                this.spinner.style.display = 'none';
                this.setBackground();
                this.el.onmousedown = this.imgMouseDown.bind(this);
                this.el.onmouseup = this.imgMouseUp.bind(this)
                this.el.onmousemove = this.imgMouseMove.bind(this);
                this.el.onmousewheel = this.zoomImage.bind(this)
            }
            this.image.src = options.imgSrc;
        }
        getDataURL() {
            let width = this.thumbBox.offsetWidth,
                height = this.thumbBox.offsetHeight,
                canvas = doc.createElement('canvas');
            canvas.width = width;
            canvas.height = height;
            let ctx = canvas.getContext('2d');
            ctx.drawImage(this.image, dragLeft, dragTop, width, height, 0, 0, width, height);
            const imageData = canvas.toDataURL('image/png');
            return imageData
        }



        imgMouseDown(e) {
            e = e || w.event;

            this.draggable = true;
            this.disX = e.clientX;
            this.disY = e.clientY;
        }
        imgMouseMove(e) {
            e = e || w.event;
            e.preventDefault();
            e.stopPropagation();

            if (this.draggable) {
                let x = e.clientX - this.disX;
                let y = e.clientY - this.disY;
                console.log(x, y, this.disX, this.disY);
                const pos = this.styleEl.backgroundPosition.split(' ');
                x = x + parseInt(pos[0]);
                y = y + parseInt(pos[1]);
                this.styleEl.backgroundPosition = `${x}px ${y}px`;
            }

        }
        imgMouseUp(e) {
            e = e || w.event;
            this.draggable = false;
            this.state.mouseX = e.clientX;
            this.state.mouseY = e.clientY
        }

    }
    w.CropBox = CropBox
})(window, document)